<template>
  <!-- <Person />
  <Car />
  <PersonInfo /> -->
  <!-- <ComputedDemo /> -->
  <!-- <WatchDemo1 /> -->
  <!-- <WatchDemo2 /> -->
  <!-- <WatchDemo3 /> -->
  <!-- <WatchDemo4 /> -->
  <!-- <WatchDemo5 /> -->
  <!-- <WacthEffect ref="ren" /> -->
  <!-- <InterfaceDemo /> -->
  <!-- <PropsDemo b="哈哈" :dataList="dataList" /> -->
  <!-- <Lifecycle v-if="isShow" /> -->
  <!-- <CustomHook /> -->
  <!-- <LoginTest /> -->
  <h1>我式APP组件</h1>
  <Count />
  <LoveTalk />
</template>

<script lang="ts" setup name="App">
import {
  nextTick,
  ref,
  reactive,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
} from "vue";
// import Person from "./components/Person.vue";
// import Car from "./components/Car.vue";
// import PersonInfo from "./components/PersonInfo.vue";
// import ComputedDemo from "./components/ComputedDemo.vue";
// import WatchDemo1 from "./components/WatchDemo1.vue";
// import WatchDemo2 from "./components/WatchDemo2.vue";
// import WatchDemo3 from "./components/WatchDemo3.vue";
// import WatchDemo4 from "./components/WatchDemo4.vue";
// import WatchDemo5 from "./components/WatchDemo5.vue";
// import WacthEffect from "./components/WacthEffect.vue";
// import InterfaceDemo from "./components/InterfaceDemo.vue";
// let ren = ref();
// nextTick(() => {
//   console.log(
//     "组件的ref是组件对象",
//     ren.value,
//     ren.value.a,
//     ren.value.b,
//     ren.value.c
//   );
// });
// import PropsDemo from "./components/PropsDemo.vue";
// import { type IPersons1 } from "./types";
// let dataList = reactive<IPersons1>([
//   { id: "fdsafwefds001", name: "里斯", age: 18 },
//   { id: "fdsafwefds002", name: "王五", age: 19 },
//   { id: "fdsafwefds003", name: "赵六", age: 28, address: "上海市闵行区" },
// ]);
// import Lifecycle from "./components/Lifecycle.vue";
// let isShow = ref(true);
// console.log("父创建");
// onBeforeMount(() => {
//   console.log("父挂载前");
// });
// onMounted(() => {
//   console.log("父挂载完毕");
// });
// onBeforeUpdate(() => {
//   console.log("父更新前");
// });
// onUpdated(() => {
//   console.log("父更新完毕");
// });
// onBeforeUnmount(() => {
//   console.log("父卸载前");
// });
// onUnmounted(() => {
//   console.log("父卸载完毕");
// });
// import CustomHook from "./components/CustomHook.vue";
// import LoginTest from "./components/LoginTest.vue";
import Count from "./components/Count.vue";
import LoveTalk from "./components/LoveTalk.vue";
</script>

<style scoped></style>
